<!--********************************************************************
* Copyright© 2000 - 2018 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_animatorCar"></title>
    <script type="text/javascript" src="../js/include-web.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" include="echarts" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">
    var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
    var map, url = host + "/iserver/services/map-changchun/rest/maps/长春市区图";
    map = L.map('map', {
        crs: L.CRS.NonEarthCRS({
            bounds: L.bounds([48.4, -7668.25], [8958.85, -55.58]),
            origin: L.point(48.4, -55.58)
        }),
        center: [-3900, 4700],
        maxZoom: 18,
        zoom: 3
    });
    L.supermap.tiledMapLayer(url).addTo(map);

    queryData();

    function queryData() {
        var param = new SuperMap.QueryBySQLParameters({
            queryParams: {
                name: "BusLine@Changchun#1",
                attributeFilter: "SmID > 0"
            }
        });
        L.supermap
            .queryService(url)
            .queryBySQL(param, function (serviceResult) {
                addlayers(processData(serviceResult.result.recordsets[0].features.features));
            });

        function processData(features) {
            var busLines = [].concat.apply([], features.map(function (busLine) {
                var points = busLine.geometry.coordinates;
                return {
                    coords: points,
                    effect: {
                        constantSpeed: 60,
                        show: true,
                        trailLength: 0,
                        symbolSize: 30,
                        symbol: function () {
                            if ((Math.round(Math.random() * 2) % 2)) {
                                return 'image://../classic/images/blueCar.png'
                            } else {
                                return 'image://../classic/images/redCar.png'
                            }
                        }()
                    },
                };
            }));
            return busLines;
        }
    }

    function addlayers(busLines) {
        var option = {
            series: [
                {
                    type: 'lines',
                    coordinateSystem: 'leaflet',
                    polyline: true,
                    data: busLines,
                    silent: true,
                    lineStyle: {
                        normal: {
                            opacity: 0.2,
                            width: 2,
                            color: '#000'
                        }
                    },
                    progressiveThreshold: 500,
                    progressive: 200,
                    zlevel: 2
                },
                {
                    type: 'lines',
                    coordinateSystem: 'leaflet',
                    polyline: true,
                    data: busLines,
                    lineStyle: {
                        normal: {
                            width: 0
                        }
                    },
                    effect: {
                        constantSpeed: 60,
                        show: true,
                        trailLength: 0,
                        symbolSize: 30,
                    },
                    zlevel: 1
                }]
        };
        L.supermap.echartsLayer(option).addTo(map);
    }

</script>
</body>
</html>